<template>
<section class="section-box">
    <section-title>
        <h3>关 于 我</h3>
        <p>about me</p>
    </section-title>
    <quote>
        <div v-html="notice"></div>
    </quote>
    <p class="txt-indent">{{ data.summary }}</p>
    <ul class="comp-area fn-clear">
        <li v-for="item in data.list" :key="item.id">
            <comp-list :data="item"></comp-list>
        </li>
    </ul>
    <p class="txt-indent" v-for="txt in data.epilogue" :key="txt.index">
        {{ txt }}
    </p>
</section>
</template>

<script>
import sectionTitle from "@/components/section-title";
import compList from "@/components/comp-list";
import Quote from "@/components/quote";
import {
    fetchAbout
} from "../api";
export default {
    name: "AboutMe",
    data() {
        return {
            data: {},
        };
    },
    components: {
        sectionTitle,
        compList,
        Quote,
    },
    computed: {
        notice() {
            return this.$store.getters.notice;
        },
    },
    methods: {
        fetchAbout() {
            fetchAbout()
                .then((res) => {
                    this.data = res.data || {};
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    mounted() {
        this.fetchAbout();
    },
};
</script>

<style lang="less" scoped>
.section-box {
    .comp-area {
        display: flex;
        padding-top: 50px;
        justify-content: center;
        flex-wrap: wrap;

        li {
            flex: 0 0 31%;

            &:not(:last-child) {
                margin-right: 3%;
            }
        }
    }

    .txt-indent {
        padding-bottom: 10px;
        text-indent: 2em;
    }
}

@media (max-width: 800px) {
    .section-box {
        .comp-area {
            li {
                flex: 0 0 98%;

                &:not(:last-child) {
                    margin-right: 0;
                }
            }
        }
    }
}
</style>
